<template>
  <div style="background:#fff;" class="w1 h1">
    <!-- 顶栏 -->
    <div class="search-content">
      <Col class="panel content-header" :span="24">
      <div class="title-bar cf">
        <h5 class="fl">
          <span>
            <a href="javascript:void(0);" class="link" @click="goToPreviousPage">
              <i class="fa fa-angle-left" aria-hidden="true"></i>返回上一页</a>
            <span class="dashboard-card-sep">|</span>
            <span class="dashboard-card-name"><span>设备详情</span></span>
          </span>
        </h5>
        <Breadcrumb>
          <BreadcrumbItem to="/iot">Iot</BreadcrumbItem>
          <BreadcrumbItem to="/iot/device">设备管理</BreadcrumbItem>
          <BreadcrumbItem>设备详情</BreadcrumbItem>
        </Breadcrumb>
      </div>
      </Col>
    </div>
    <div style="padding:10px;box-sizing:border-box;">
      <div style="margin-bottom:10px;">
        <Input style="width:180px;" v-if="editable" v-model="deviceName"></Input>
        <h2 style="font-size:20px;;display:inline-block;" v-else>{{deviceName}}</h2>
        <span style="margin-left:10px;display:inline-block;" @click="handleEdit">
          <Icon type="ios-create-outline" size="22" style="line-height:.6;" />
        </span>
      </div>
      <Tabs @on-click="handleClick">
        <TabPane label="设备信息" name="first">
          <info :id="id" v-if="displayFirstTab"></info>
        </TabPane>
        <TabPane :label="tabLabel" name="second">
          <template v-if="currentName==='second'">
            <template v-if="nodeType===0">
              <yuzhi :id="id"></yuzhi>
            </template>
            <template v-else>
              <childManage :id="id"></childManage>
            </template>
          </template>
        </TabPane>
      </Tabs>
    </div>
  </div>
</template>
<script>
import info from './info'
import childManage from './childManage'
import yuzhi from './yuzhi'
import { getIotDeviceInfo } from '@/api'

export default {
  components: {
    info,
    childManage,
    yuzhi
  },

  created() {
    const { nodeType, id } = this.$route.params
    this.nodeType = parseInt(nodeType)
    this.id = id
    if (this.nodeType === 0) {
      this.tabLabel = '报警阈值'
    } else {
      this.tabLabel = '子设备管理'
    }
  },

  beforeRouteUpdate() {
    const { nodeType, id } = this.$route.params
    this.nodeType = parseInt(nodeType)
    this.id = id
    this.getDeviceInfo()
    if (this.nodeType === '0') {
      this.tabLabel = '报警阈值'
    } else {
      this.tabLabel = '子设备管理'
    }
  },
  mounted() {
    this.getDeviceInfo()
  },
  data: () => ({
    nodeType: '',
    id: '',
    currentName: 'first',
    tabLabel: '',
    editable: false,
    deviceName: ''
  }),
  computed: {
    displayFirstTab() {
      return this.id && this.currentName === 'first'
    }
  },
  methods: {
    handleClick(name) {
      this.currentName = name
    },
    async getDeviceInfo() {
      if (this.id) {
        const { code, data } = await getIotDeviceInfo(this.id)
        if (code === 200) {
          const { deviceName } = data
          this.deviceName = deviceName
        }
      }
    },

    goToPreviousPage() {
      this.$router.push('/iot/device')
    },

    handleEdit() {
      if (this.editable) {
        this.editable = false
        // 需要保存
        // console.log(this.deviceName)
      } else {
        this.editable = true
      }
    }
  }
}
</script>